<template>
    <header>
        <div id="headercontent">
            <nav>
                <div id="logo"><a href="/"><img :src="logoUrl"></a></div>
                <ul>
                    <li :class="{'actived':isHome}"><a  v-link="{ path: '/'}" title="高维学堂官网首页">首页</a></li>
                    <li :class="{'actived':isLesson}"><a  v-link="{ path: '/lesson' }" title="馒头商学院_产品经理_视频课程">实战新课</a></li>
                    <li :class="{'actived':isWz}"><a  v-link="{ path: '/article' }" title="馒头商学院_产品经理_视频课程">高维大咖</a></li>
                    <li ><a  href="" title="馒头商学院_产品运营_视频课程">关于高维</a></li>
                </ul>
                <div class="my-set-div" v-on:Click="showPanel">
                    <div class="line one t0" v-bind:style="styleOne"></div>
                    <div class="line two t6 "></div>
                    <div class="line three t12"  v-bind:style="styleThree"></div>
                </div>
            </nav>
            <ul class="bar-phone" v-if="show">
                <li v-bind:class="{ 'active': isHome}"><a -link="{ path: '/'}">首页</a></li>
                <li><a v-link="{ path: '/lesson' }">实战新课</a></li>
                <li><a v-link="{ path: '/article' }">高维大咖</a></li>
                <li><a href="">关于高维</a></li>
            </ul>
            </div>
    </header>
</template>
<script>
    export default{
        props:{
          active:'',
          isHome:'',
          isWz:'',
          isLesson:''

        },
        data(){
            return{
                show:false,
                styleOne:{},
                styleThree:{},
                logoUrl:require('assets/imgs/app-logo.png')

            }
        },
        components:{
        },
        methods:{
          showPanel(){
            this.show = !this.show;
            if(this.show){
            this.styleOne = {
              top:'-4px'
            };
            this.styleThree = {
              top:'16px'
            };
          }else {
            this.styleOne={}, this.styleThree = {};
          }
        }
        },
        ready(){
          var path = this.$route.name;
          if(path === 'home'){
            this.isHome = true;
          }else if(path === 'article'){
              this.isWz = true;
          } else if(path === 'lesson'){
              this.isLesson = true;
          }
        }
    }
</script>
